
import { onMounted, onUnmounted, ref } from 'vue'



export function useContextMenu(containerDom) {
  const x = ref(0)
  const y = ref(0)
  const visible = ref(false)
  function openMenu(e) {
    e.preventDefault()
    e.stopPropagation()
    visible.value = true
    x.value = e.clientX
    y.value = e.clientY
  }
  function closeMenu() {
    visible.value = false

  }
  onMounted(() => {
    containerDom.addEventListener('contextMenu', openMenu)
    window.addEventListener('click', closeMenu)
    window.addEventListener('contextMenu', openMenu)

  })
  onUnmounted(() => {
    containerDom.removeEventListener('contextMenu', openMenu)

    window.removeEventListener('click', closeMenu)
    window.removeEventListener('contextMenu', openMenu)
  })

  return {
    x,
    y,
    visible
  }
}